<template>
    <div class="infoMenu">
        <el-row class="tac">
            <el-col>
                <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        :default-openeds="openeds" :default-active="dfActive">
                    <el-submenu index="1">
                        <span slot="title" class="infoAboutUs icon iconfont icon-aboutus">关于我们</span>
                        <el-menu-item-group>
                            <el-menu-item index="1-1"><router-link to="/information">公司简介</router-link></el-menu-item>
                            <el-menu-item index="1-2"><router-link to="/basicinfo">基本信息</router-link></el-menu-item>
                            <el-menu-item index="1-3"><router-link to="/manageteam">管理团队</router-link></el-menu-item>
                            <el-menu-item index="1-4"><router-link to="/ourhonor">荣誉资质</router-link></el-menu-item>
                            <el-menu-item index="1-5"><router-link to="/bigevent">大事件</router-link></el-menu-item>
                            <el-menu-item index="1-6"><router-link to="/proddescrip">产品介绍</router-link></el-menu-item>
                            <el-menu-item index="1-7"><router-link to="/charges">收费标准</router-link></el-menu-item>
                            <el-menu-item index="1-8"><router-link to="/auditreport">审计报告</router-link></el-menu-item>
                            <el-menu-item index="1-9"><router-link to="/legaladviser">法律顾问</router-link></el-menu-item>
                            <el-menu-item index="1-10"><router-link to="/contactus">联系我们</router-link></el-menu-item>
                            <el-menu-item index="1-11"><router-link to="/joinus">加入我们</router-link></el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="2">
                        <span slot="title" class="icon iconfont icon-operationaldata">运营数据</span>
                        <el-menu-item-group>
                            <el-menu-item index="2-1"><router-link to="/platformdata">平台数据</router-link></el-menu-item>
                            <el-menu-item index="2-2"><router-link to="/reports">运营报告</router-link></el-menu-item>        
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="3">
                        <span slot="title" class="icon iconfont icon-news">最新动态</span>
                        <el-menu-item-group>
                            <el-menu-item index="3-1"><router-link to="/notice">官方公告</router-link></el-menu-item>
                            <el-menu-item index="3-2"><router-link to="/media">媒体报道</router-link></el-menu-item>
                            <el-menu-item index="3-3"><router-link to="/state">公司动态</router-link></el-menu-item>                       
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default{
        data(){
            return{
                openeds: ['1','2','3'],
                dfActive: ''
            }
        },
        created(){
            this.fetchData();
        },
        watch:{
            '$route': 'fetchData'
        },
        methods: {
            fetchData(){
                this.dfActive = this.$route.name[1]
            }
        }
    }
</script>

<style lang="scss">
    .infoMenu{
        height: 968px;
        margin: 0 0 50px 0;
        .el-row{
            width: 270px;
        }
        .el-submenu .el-menu-item{
            padding: 0;
            &:hover{
                background: #f6f6f6;
            }
            &.is-active{
                background: #f6f6f6;
                border-left: 3px solid #ee6c45;
                padding-left: 37px;
                a{
                    color: #ee6c45;
                    position: relative;
                    left: -3px;
                }
            }
        }
        .el-menu-item-group__title{
            display: none;
        }
        .el-submenu .el-menu-item a{
            color: #333333;
            display: block;
            text-indent: 13px;
        }
        .el-menu{
            border: none;
        }
        .el-submenu__title{
            &:hover{
                background: #ffffff;
            }
            span{
                &:before{
                    font-size: 16px;
                    color: #ee6c45;
                    padding-right: 18px;
                }
            }

        }
    }
</style>
